<template>
    <div>
        <div class="post-container" v-for="item in props.articlesValue" :key="item.id">

            <div class="image">
                <img :src="item.thumbnail" class="image">
            </div>

            <div class="content" @click="handleclick(item.id)">
                <div class="title">
                    <h3>{{ item.title }}</h3>
                </div>
                <div class="icons">
                    <a class="time">
                        <i class="iconfont icon-shijian"></i>
                        <span>发表于</span><span style="margin-left: .3rem;">{{ item.createTime }}</span>
                    </a>
                    <a href="#" class="icon">
                        <i class="iconfont icon-yonghu1"></i>
                        <span>{{ item.username }}</span>
                    </a>
                    <a href="#" class="icon">
                        <i class="iconfont icon-pinglun"></i>
                        <span>45</span>
                    </a>
                    <a href="#" class="icon">
                        <i class="iconfont icon-collect"></i>
                        <span>{{ item.likeCount }}</span>
                    </a>
                    <a href="#" class="icon">
                        <i class="iconfont icon-eye"></i>
                        <span>{{ item.viewCount }}</span>
                    </a>
                </div>
                <div class="summary">
                    <p class="text">{{ item.summary }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { updateArticleViewCountAPI } from '@/api'
const props = defineProps({
    articlesValue: {
        type: Array,
        default: []
    },
})
const router = useRouter()
const handleclick = async (val) => {
    await updateArticleViewCountAPI(val)
    router.push({
        path: "/layout/articledetail",
        query: {
            articleId: val
        }
    }).catch(err => { })
}

</script>

<style lang="scss" scoped>
.post-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem;
    border-radius: 1rem;
    transition: transform 0.5s;
    margin-bottom: 1.8rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.post-container:hover {
    transform: translateY(-4px);
}

.post-container .image {
    flex: 1 1 25rem;
    height: 22rem;
    overflow: hidden;
}

.post-container .image img {
    width: 100%;
    height: 100%;
    border-radius: 1rem 0 0 1rem;
    object-fit: cover;
}

.post-container .image img:hover {
    transform: scale(1.3);
}

.post-container .content {
    flex: 1 1 35rem;
    height: 22rem;
    padding: 1.5rem;
}

.post-container .content .title {
    padding-top: 1.5rem;
    font-size: 2.2rem;
    color: #676767;
    cursor: pointer;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post-container .content .title:hover {
    color: orange;
}

.post-container .content .icons {
    margin: 1.5rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.post-container .content .icons a {
    font-size: 1.6rem;
    text-align: center;
    align-items: center;
    cursor: pointer;
    color: #777;
}

.post-container .content .icons i {
    display: inline;
    font-size: 1.8rem;
    color: #777;
}

.post-container .content .icons a span {
    color: #777;
    margin-left: .4rem;
}

.post-container .content .icons a:hover span {
    color: orange;
}

.post-container .content .icons a:hover i {
    color: orange;
}

.post-container .content .summary .text {
    color: #777;
    font-size: 1.4rem;
    line-height: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>